<template>
  <uni-popup ref="popup" :type="type" :mask-click="maskClick" @change="change">
    <view class="uni-popup-dialog">
      <view class="uni-popup-dialog__title">
        <text class="uni-popup-dialog__title-text">{{ title }}</text>
      </view>
      <view class="uni-popup-dialog__content">
        <view class="uni-popup-dialog__content-text">
          <slot>{{ content }}</slot>
        </view>
      </view>
      <view class="uni-popup-dialog__btn-group">
        <view v-if="showCancel" class="uni-popup-dialog__btn" @click="closeDialog('cancel')">
          <text class="uni-popup-dialog__btn-text">{{ cancelText }}</text>
        </view>
        <view class="uni-popup-dialog__btn" @click="closeDialog('confirm')">
          <text class="uni-popup-dialog__btn-text">{{ confirmText }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import uniPopup from './uni-popup.vue'

export default {
  name: 'UniPopupDialog',
  components: {
    uniPopup
  },
  props: {
    type: {
      type: String,
      default: 'center'
    },
    maskClick: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: ''
    },
    beforeClose: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    change(e) {
      this.$emit('change', e)
    },
    closeDialog(type) {
      if (this.beforeClose) {
        this.$emit('close', {
          type: type,
          show: false
        })
        return
      }
      this.$emit('close', {
        type: type,
        show: false
      })
      this.close()
    }
  }
}
</script>

<style>
.uni-popup-dialog {
  width: 300px;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.uni-popup-dialog__title {
  padding: 20px 15px 0;
  text-align: center;
}

.uni-popup-dialog__title-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.uni-popup-dialog__content {
  padding: 15px;
}

.uni-popup-dialog__content-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.uni-popup-dialog__btn-group {
  display: flex;
  border-top: 1px solid #eee;
}

.uni-popup-dialog__btn {
  flex: 1;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 14px;
}

.uni-popup-dialog__btn-text {
  color: #333;
}

.uni-popup-dialog__btn:active {
  background-color: #f1f1f1;
}

.uni-popup-dialog__btn:last-child {
  border-left: 1px solid #eee;
}

.uni-popup-dialog__btn:last-child .uni-popup-dialog__btn-text {
  color: #007aff;
}
</style> 